<template>
  <div class="meeting online">
    <div class="meeting-title">
      <h2>线上双选会</h2>
      <h5>选我所爱</h5>
    </div>
    <div class="meeting-show">
      <div ref="swiperBox" v-swiper:swiper="swiperOption" class="swiper swiperBox">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="v in meetingList" :key="v.id">
            <nuxt-link v-for="m in v.list" :key="v.id + m.id" class="swiper-item transform"
                       :class="{ 'isEnd': (m.is_open != 0) }"
                       :to="(m.is_open == 0) ? { path: '/choice/detail', query: { id: m.id } } : {}">
              <div class="item-top clearfix">
                <div class="item-logo" :style="{ background: 'url(' + m.images + ') center center / cover no-repeat' }">
                </div>
                <div class="con">
                  <p class="title">{{ m.name }}</p>
                  <p class="mai">{{ m.for_name }}</p>
                  <p class="num">
                    <span>参会企业{{ m.attend_company }}家</span>
                    <span>提供岗位{{ m.operating_number }}个</span>
                    <br>
                    <span>点击量{{ m.attend_person }}人次</span>
                    <span v-if="m.user_num > 0">报名人数{{ m.user_num }}人次</span>
                  </p>
                </div>
              </div>
              <div class="item-bottom">
                <p class="time">网申截止 {{ m.end_time }}</p>
                <p class="link">
                  <span>网申入口</span> <i class="iconfont icon-right"></i>
                </p>
              </div>
              <p class="corner">线上双选会</p>
            </nuxt-link>
          </div>
        </div>
        <div slot="pagination" class="swiper-pagination"></div>
      </div>
    </div>
    <div slot="button-prev" class="online-swiper-button-prev iconfont icon-bleft swiper-btn"></div>
    <div slot="button-next" class="online-swiper-button-next iconfont icon-bright swiper-btn"></div>
  </div>
</template>

<script>
export default {
  props: ['onlineList'],
  watch: {
    onlineList(val) {
      this.meetingList.length === 0 && this.formatterList(val)
    }
  },
  data() {
    return {
      meetingList: [],
      swiperOption: {
        loop: false,
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'banner-bullet',
          clickable: true,
          renderBullet(index, className) {
            return `<span class="${className}"></span>`;
          },
        },
        navigation: {
          nextEl: '.online-swiper-button-next',
          prevEl: '.online-swiper-button-prev',
        },
        on: {
          slideChange() {
            // console.log('onSlideChangeEnd', this);
          },
          tap() {
            // console.log('onTap', this);
          }
        },
        // autoplay: {
        //   delay: 6000,
        //   disableOnInteraction: false, // 触碰后不停止自动切换
        // },
        autoplay: false,
        // effect:'cube',
        mousewheel: false, // 滚轮控制
        preloadImages: false,
        lazy: true
      },
    }
  },
  swiper() {
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    return this.$refs.swiperBox.swiper
  },
  created() {
    this.onlineList.length > 0 && this.formatterList()
  },
  mounted() {
  },
  methods: {
    formatterList() {
      const curList = [];
      this.onlineList.forEach((s, i) => {
        i % 9 === 0
          ? curList.push({ id: 'online' + i, list: [s] })
          : curList[Math.floor(i / 9)].list.push(s)
      });
      this.meetingList = curList;
    }
  }
}
</script>
<style lang="scss" scoped>
.isEnd {
  background: #ebebeb;
  color: #ccc;
}

.isEnd:hover {
  cursor: not-allowed
}

.online {
  position: relative;
  width: $base-width;
  margin: 0 auto;

  .meeting-title {
    text-align: center;
    padding: 40px 0;

    h2 {
      font-size: 36px;
      color: #333;
      margin-bottom: 5px;
    }

    h5 {
      font-size: 18px;
      color: #666;
    }
  }

  .meeting-show {
    width: $base-width;
    height: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    .swiper,
    .swiper-wrapper {
      height: 100%;
      width: 100%;

      .swiper-slide {
        position: relative;
        overflow: hidden;
        height: 100%;
        width: 100%;

        .swiper-item {
          float: left;
          height: 168px;
          width: 386px;
          margin-right: 21px;
          margin-bottom: 21px;
          border: 1px solid #ebebeb;
          border-radius: 4px;
          position: relative;

          &:nth-child(3n) {
            margin-right: 0;
          }

          &:hover {
            box-shadow: 0 5px 15px 0 #e8e8e9;
          }
        }
      }

      .swiper-pagination {
        height: 30px;
        width: 100%;
        bottom: 0;
        z-index: 2;

        ::v-deep .banner-bullet {
          display: inline-block;
          height: 4px;
          width: 20px;
          background: #ebebeb;
          border-radius: 2px;
          margin: 0 6px;
        }

        ::v-deep .swiper-pagination-bullet-active {
          background: $base-color;
        }
      }
    }
  }

  .swiper-btn {
    position: absolute;
    top: 50%;
    height: 44px;
    width: 27px;
    margin-top: 34px;
    cursor: pointer;
    font-size: 44px;
    color: #ccc;

    &:hover {
      color: $base-color;
    }
  }

  .online-swiper-button-prev {
    left: -70px;
  }

  .online-swiper-button-next {
    right: -53px;
  }

  .item-top {
    padding: 20px 10px;

    .item-logo {
      float: left;
      height: 80px;
      width: 80px;
      text-align: center;
      border: 1px solid #ebebeb;
      overflow: hidden;

      img {
        display: inline-block;
        height: 100%;
        margin: 0 auto;
      }
    }

    .con {
      float: left;
      padding-left: 15px;
      width: 280px;

      .title {
        color: #333;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .mai {
        color: #999;
        font-size: 12px;
        margin: 5px 0 10px 0;
      }

      .num {
        span {
          color: $base-color;
          font-size: 12px;
        }
      }
    }
  }

  .item-bottom {
    height: 40px;
    line-height: 40px;
    margin: 0 10px;
    border-top: 1px dashed #ebebeb;
    font-size: 12px;

    .time {
      float: left;
      color: #666;
      position: relative;
      padding-left: 10px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 16px;
        height: 10px;
        width: 2px;
        background: $base-color;
      }
    }

    .link {
      float: right;

      span,
      i {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    background: rgba(71, 113, 220, 0.3);
    color: $base-color;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
</style>
